import React from 'react';
import {PopupProps} from "./type";
import Modal from "react-native-modal";

const Popup = (props: PopupProps) => {
    const {
        mode = "center",
        dispatch,
        children,
        ...attrs
    } = props;

    const modeStyle = {
        "bottom": {
            swipeDirection: "down",
            style: {
                justifyContent: 'flex-end',
                margin: 0,
            }
        },
        "left": {
            animationIn: "slideInLeft",
            animationOut: "slideOutRight",
            swipeDirection: mode,
            style: {
                margin: 0
            }
        },
        "right": {
            animationIn: "slideInRight",
            animationOut: "slideOutRight",
            swipeDirection: mode,
            style: {
                margin: 0,
                marginLeft: "auto"
            }
        },
        top: {
            swipeDirection: "up",
            style: {
                justifyContent: 'flex-start',
                margin: 0,
            }
        }
    }

    const modelProps = {
        ...modeStyle[mode],
        ...attrs
    }

    function handleClose(eventName: string) {
        dispatch({
            type: "close"
        });
        typeof props[eventName] == "function" && props[eventName]();
    }

    return (
        <Modal
            useNativeDriver={true}
            hideModalContentWhileAnimating={true}
            {...modelProps}
            onBackButtonPress={() => handleClose("onBackButtonPress")}
            onBackdropPress={() => handleClose("onBackdropPress")}
            onSwipeComplete={() => handleClose("onSwipeComplete")}
        >
            {props.isVisible && children}
        </Modal>
    )

};

export default Popup;